<template>
  <div>
    <el-row :gutter="30">
      <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
        <el-col :span="24">
          <el-form-item label="查看选项：" prop="fieldFormYq">
            <el-checkbox-group v-model="formData.fieldFormYq" size="medium" @change="fieldFormYqChange">
              <el-checkbox-button v-for="(item, index) in fieldFormYqOptions" :key="index" :label="item.value"
                                  :disabled="item.disabled">{{ item.label }}
              </el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="fieldFormEq">
            <el-checkbox-group v-model="formData.fieldFormEq" size="medium" @change="fieldFormEqChange">
              <el-checkbox-button v-for="(item, index) in fieldFormEqOptions" :key="index" :label="item.value"
                                  :disabled="item.disabled">{{ item.label }}
              </el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="fieldFormYs">
            <el-checkbox-group v-model="formData.fieldFormYs" size="medium" @change="fieldFormYsChange">
              <el-checkbox-button v-for="(item, index) in fieldFormYsOptions" :key="index" :label="item.value"
                                  :disabled="item.disabled">{{ item.label }}
              </el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="起始时间：" prop="startDate">
            <el-date-picker
              v-model="formData.startDate"
              type="datetime"
              placeholder="选择起始时间"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="终止时间：" prop="endDate">
            <el-date-picker
              v-model="formData.endDate"
              type="datetime"
              placeholder="选择终止时间"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label-width="1px" label="" prop="setTime">
            <el-checkbox-group v-model="formData.setTime" :max="1" size="medium">
              <el-checkbox-button v-for="(item, index) in setTimeOptions" :key="index" :label="item.value"
                                  :disabled="item.disabled">{{ item.label }}
              </el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="查询间隔：" prop="querySpace">
            <el-select v-model="formData.querySpace" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="纵坐标：" prop="minY">
            <el-select v-model="paramValue" placeholder="请选择" style="width: 150px">
              <el-option
                v-for="item in paramOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input style="width: 80px" v-model="minY"></el-input>
            <span>-</span>
            <el-input style="width: 80px" v-model="maxY"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="">
            <el-button type="primary" size="medium" @click="handleQuery">启动</el-button>
            <el-button @click="resetForm">重置</el-button>
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="medium"
              @click="handleExport"
            >导出
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-row :gutter="30">
          </el-row>
        </el-col>
        <el-col :span="22">
          <el-row :gutter="10">
            <!--容器盒子-->
            <div id="main" style="width: 100%;height:600px;"></div>
          </el-row>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import echarts from 'echarts'
import {listChange} from "@/api/system/real";

export default {
  components: {},
  data() {
    return {
      paramValue: '',
      paramOptions: [{
        value: '1',
        label: '一期进水流量'
      }, {
        value: '2',
        label: '一期石灰投加量'
      }, {
        value: '3',
        label: '一期加药流量'
      }, {
        value: '4',
        label: '一期加药投加量'
      }, {
        value: '5',
        label: '一期沉淀后浊度'
      }, {
        value: '6',
        label: '二期进水流量'
      }, {
        value: '7',
        label: '二期石灰投加量'
      }, {
        value: '8',
        label: '二期加药流量'
      }, {
        value: '9',
        label: '二期加药投加量'
      }, {
        value: '10',
        label: '二期1#沉淀后浊度'
      }, {
        value: '11',
        label: '二期2#沉淀后浊度'
      }, {
        value: '12',
        label: '盖竹原水浊度'
      }, {
        value: '13',
        label: '盖竹原水PH'
      }, {
        value: '14',
        label: '盖竹原水温度'
      }, {
        value: '15',
        label: '高楼原水PH'
      }, {
        value: '16',
        label: '高楼原水浊度'
      }],
      options: [{
        value: '24:00:00',
        label: '二十四小时'
      }, {
        value: '12:00:00',
        label: '十二小时'
      }, {
        value: '04:00:00',
        label: '四小时'
      }, {
        value: '01:00:00',
        label: '一小时'
      }, {
        value: '00:30:00',
        label: '三十分钟'
      }, {
        value: '00:15:00',
        label: '十五分钟'
      }, {
        value: '00:10:00',
        label: '十分钟'
      }, {
        value: '00:05:00',
        label: '五分钟'
      }, {
        value: '00:01:00',
        label: '一分钟'
      }],
      formY: {
        yqJsllsMinY: null,
        yqJsllsMaxY: null,
        fit102sMinY: null,
        fit102sMaxY: null,
        mit101TsMinY: null,
        mit101TsMaxY: null,
        ait101PhsMinY: null,
        ait101PhsMaxY: null,
        ait101TsMinY: null,
        ait101TsMaxY: null,
        jnyszdsMinY: null,
        jnyszdsMaxY: null,
        jnysphsMinY: null,
        jnysphsMaxY: null,
        shsjtjll4sMinY: null,
        shsjtjll4sMaxY: null,
        shsjtjll2sMinY: null,
        shsjtjll2sMaxY: null,
        ditt11sMinY: null,
        ditt11sMaxY: null,
        cdc1ZdZsMinY: null,
        cdc1ZdZsMaxY: null,
        cdc2ZdZsMinY: null,
        cdc2ZdZsMaxY: null,
        yqJySsllsMinY: null,
        yqJySsllsMaxY: null,
        eqJySsllsMinY: null,
        eqJySsllsMaxY: null,
        yqTjlShowsMinY: null,
        yqTjlShowsMaxY: null,
        eqTjlShowsMinY: null,
        eqTjlShowsMaxY: null
      },
      minY: null,
      maxY: null,
      formList: {
        yqJslls: [],
        fit102s: [],
        mit101Ts: [],
        ait101Phs: [],
        ait101Ts: [],
        jnyszds: [],
        jnysphs: [],
        shsjtjll4s: [],
        shsjtjll2s: [],
        ditt11s: [],
        cdc1ZdZs: [],
        cdc2ZdZs: [],
        yqJySslls: [],
        eqJySslls: [],
        yqTjlShows: [],
        eqTjlShows: [],
        dateTimes: []
      },
      formData: {
        fieldFormYq: [1],
        fieldFormEq: [],
        fieldFormYs: [],
        startDate: "",
        endtDate: "",
        startDateValue: '',
        querySpace: '01:00:00',
        setTime: [24],
      },
      average: '',
      maxValue: '',
      minValue: '',
      tagName: '',
      fieldFormYqOptions: [{
        "label": "一期进水流量",
        "value": 1
      }, {
        "label": "一期石灰投加量",
        "value": 2
      }, {
        "label": "一期加药流量",
        "value": 3
      }, {
        "label": "一期加药投加量",
        "value": 4
      }, {
        "label": "一期沉淀后浊度",
        "value": 5
      }],
      fieldFormEqOptions: [{
        "label": "二期进水流量",
        "value": 6
      }, {
        "label": "二期石灰投加量",
        "value": 7
      }, {
        "label": "二期加药流量",
        "value": 8
      }, {
        "label": "二期加药投加量",
        "value": 9
      }, {
        "label": "二期1#沉淀后浊度",
        "value": 10
      }, {
        "label": "二期2#沉淀后浊度",
        "value": 11
      }],
      fieldFormYsOptions: [{
        "label": "盖竹原水浊度",
        "value": 12
      }, {
        "label": "盖竹原水PH",
        "value": 13
      }, {
        "label": "盖竹原水温度",
        "value": 14
      }, {
        "label": "高楼原水PH",
        "value": 15
      }, {
        "label": "高楼原水浊度",
        "value": 16
      }],
      setTimeOptions: [{
        "label": "24h",
        "value": 24
      }, {
        "label": "12h",
        "value": 12
      }, {
        "label": "6h",
        "value": 6
      }, {
        "label": "2h",
        "value": 2
      }, {
        "label": "1h",
        "value": 1
      }]
    }
  },
  computed: {},
  watch: {
    minY() {
      if (this.paramValue === '1') {
        this.formY.yqJsllsMinY = this.minY;
      }
      if (this.paramValue === '6') {
        this.formY.fit102sMinY = this.minY;
      }
      if (this.paramValue === '12') {
        this.formY.mit101TsMinY = this.minY;
      }
      if (this.paramValue === '13') {
        this.formY.ait101PhsMinY = this.minY;
      }
      if (this.paramValue === '14') {
        this.formY.ait101TsMinY = this.minY;
      }
      if (this.paramValue === '16') {
        this.formY.jnyszdsMinY = this.minY;
      }
      if (this.paramValue === '15') {
        this.formY.jnysphsMinY = this.minY;
      }
      if (this.paramValue === '2') {
        this.formY.shsjtjll4sMinY = this.minY;
      }
      if (this.paramValue === '7') {
        this.formY.shsjtjll2sMinY = this.minY;
      }
      if (this.paramValue === '5') {
        this.formY.ditt11sMinY = this.minY;
      }
      if (this.paramValue === '10') {
        this.formY.cdc1ZdZsMinY = this.minY;
      }
      if (this.paramValue === '11') {
        this.formY.cdc2ZdZsMinY = this.minY;
      }
      if (this.paramValue === '3') {
        this.formY.yqJySsllsMinY = this.minY;
      }
      if (this.paramValue === '8') {
        this.formY.eqJySsllsMinY = this.minY;
      }
      if (this.paramValue === '4') {
        this.formY.yqTjlShowsMinY = this.minY;
      }
      if (this.paramValue === '9') {
        this.formY.eqTjlShowsMinY = this.minY;
      }
      this.initChart();
    },
    maxY() {
      if (this.paramValue === '1') {
        this.formY.yqJsllsMaxY = this.maxY;
      }
      if (this.paramValue === '6') {
        this.formY.fit102sMaxY = this.maxY;
      }
      if (this.paramValue === '12') {
        this.formY.mit101TsMaxY = this.maxY;
      }
      if (this.paramValue === '13') {
        this.formY.ait101PhsMaxY = this.maxY;
      }
      if (this.paramValue === '14') {
        this.formY.ait101TsMaxY = this.maxY;
      }
      if (this.paramValue === '16') {
        this.formY.jnyszdsMaxY = this.maxY;
      }
      if (this.paramValue === '15') {
        this.formY.jnysphsMaxY = this.maxY;
      }
      if (this.paramValue === '2') {
        this.formY.shsjtjll4sMaxY = this.maxY;
      }
      if (this.paramValue === '7') {
        this.formY.shsjtjll2sMaxY = this.maxY;
      }
      if (this.paramValue === '5') {
        this.formY.ditt11sMaxY = this.maxY;
      }
      if (this.paramValue === '10') {
        this.formY.cdc1ZdZsMaxY = this.maxY;
      }
      if (this.paramValue === '11') {
        this.formY.cdc2ZdZsMaxY = this.maxY;
      }
      if (this.paramValue === '3') {
        this.formY.yqJySsllsMaxY = this.maxY;
      }
      if (this.paramValue === '8') {
        this.formY.eqJySsllsMaxY = this.maxY;
      }
      if (this.paramValue === '4') {
        this.formY.yqTjlShowsMaxY = this.maxY;
      }
      if (this.paramValue === '9') {
        this.formY.eqTjlShowsMaxY = this.maxY;
      }
      this.initChart();
    },
    paramValue() {
      if (this.paramValue === '1') {
        this.minY = this.formY.yqJsllsMinY;
        this.maxY = this.formY.yqJsllsMaxY;
      }
      if (this.paramValue === '6') {
        this.minY = this.formY.fit102sMinY;
        this.maxY = this.formY.fit102sMaxY;
      }
      if (this.paramValue === '12') {
        this.minY = this.formY.mit101TsMinY;
        this.maxY = this.formY.mit101TsMaxY;
      }
      if (this.paramValue === '13') {
        this.minY = this.formY.ait101PhsMinY;
        this.maxY = this.formY.ait101PhsMaxY;
      }
      if (this.paramValue === '14') {
        this.minY = this.formY.ait101TsMinY;
        this.maxY = this.formY.ait101TsMaxY;
      }
      if (this.paramValue === '16') {
        this.minY = this.formY.jnyszdsMinY;
        this.maxY = this.formY.jnyszdsMaxY;
      }
      if (this.paramValue === '15') {
        this.minY = this.formY.jnysphsMinY;
        this.maxY = this.formY.jnysphsMaxY;
      }
      if (this.paramValue === '2') {
        this.minY = this.formY.shsjtjll4sMinY;
        this.maxY = this.formY.shsjtjll4sMaxY;
      }
      if (this.paramValue === '7') {
        this.minY = this.formY.shsjtjll2sMinY;
        this.maxY = this.formY.shsjtjll2sMaxY;
      }
      if (this.paramValue === '5') {
        this.minY = this.formY.ditt11sMinY;
        this.maxY = this.formY.ditt11sMaxY;
      }
      if (this.paramValue === '10') {
        this.minY = this.formY.cdc1ZdZsMinY;
        this.maxY = this.formY.cdc1ZdZsMaxY;
      }
      if (this.paramValue === '11') {
        this.minY = this.formY.cdc2ZdZsMinY;
        this.maxY = this.formY.cdc2ZdZsMaxY;
      }
      if (this.paramValue === '3') {
        this.minY = this.formY.yqJySsllsMinY;
        this.maxY = this.formY.yqJySsllsMaxY;
      }
      if (this.paramValue === '8') {
        this.minY = this.formY.eqJySsllsMinY;
        this.maxY = this.formY.eqJySsllsMaxY;
      }
      if (this.paramValue === '4') {
        this.minY = this.formY.yqTjlShowsMinY;
        this.maxY = this.formY.yqTjlShowsMaxY;
      }
      if (this.paramValue === '9') {
        this.minY = this.formY.eqTjlShowsMinY;
        this.maxY = this.formY.eqTjlShowsMaxY;
      }
    }
  },
  created() {
    this.handleAsync();
  },
  methods: {
    fieldFormYqChange() {
      if (this.formData.fieldFormYq.indexOf(1) < 0) {
        this.formY.yqJsllsMinY = null;
        this.formY.yqJsllsMaxY = null;
      }
      if (this.formData.fieldFormYq.indexOf(2) < 0) {
        this.formY.shsjtjll4sMinY = null;
        this.formY.shsjtjll4sMaxY = null;
      }
      if (this.formData.fieldFormYq.indexOf(3) < 0) {
        this.formY.yqJySsllsMinY = null;
        this.formY.yqJySsllsMaxY = null;
      }
      if (this.formData.fieldFormYq.indexOf(4) < 0) {
        this.formY.yqTjlShowsMinY = null;
        this.formY.yqTjlShowsMaxY = null;
      }
      if (this.formData.fieldFormYq.indexOf(5) < 0) {
        this.formY.ditt11sMinY = null;
        this.formY.ditt11sMaxY = null;
      }
    },
    fieldFormEqChange() {
      if (this.formData.fieldFormEq.indexOf(6) < 0) {
        this.formY.fit102sMinY = null;
        this.formY.fit102sMaxY = null;
      }
      if (this.formData.fieldFormEq.indexOf(7) < 0) {
        this.formY.shsjtjll2sMinY = null;
        this.formY.shsjtjll2sMaxY = null;
      }
      if (this.formData.fieldFormEq.indexOf(8) < 0) {
        this.formY.eqJySsllsMinY = null;
        this.formY.eqJySsllsMaxY = null;
      }
      if (this.formData.fieldFormEq.indexOf(9) < 0) {
        this.formY.eqTjlShowsMinY = null;
        this.formY.eqTjlShowsMaxY = null;
      }
      if (this.formData.fieldFormEq.indexOf(10) < 0) {
        this.formY.cdc1ZdZsMinY = null;
        this.formY.cdc1ZdZsMaxY = null;
      }
      if (this.formData.fieldFormEq.indexOf(11) < 0) {
        this.formY.cdc2ZdZsMinY = null;
        this.formY.cdc2ZdZsMaxY = null;
      }
    },
    fieldFormYsChange() {
      if (this.formData.fieldFormYs.indexOf(12) < 0) {
        this.formY.mit101TsMinY = null;
        this.formY.mit101TsMaxY = null;
      }
      if (this.formData.fieldFormYs.indexOf(13) < 0) {
        this.formY.ait101PhsMinY = null;
        this.formY.ait101PhsMaxY = null;
      }
      if (this.formData.fieldFormYs.indexOf(14) < 0) {
        this.formY.ait101TsMinY = null;
        this.formY.ait101TsMaxY = null;
      }
      if (this.formData.fieldFormYs.indexOf(15) < 0) {
        this.formY.jnysphsMinY = null;
        this.formY.jnysphsMaxY = null;
      }
      if (this.formData.fieldFormYs.indexOf(16) < 0) {
        this.formY.jnyszdsMinY = null;
        this.formY.jnyszdsMaxY = null;
      }
    },
    handleAsync() {
      this.getList(() => {
        console.log('异步方法1已完成');
        this.initChart(() => {
          console.log('异步方法2已完成');
        });
      });
    },
    /** 查询数据趋势 */
    getList(callback) {
      listChange(this.formData).then(response => {
          this.formList = response.data;
        }
      );
      // 异步操作
      setTimeout(() => {
        callback();
      }, 1000);
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/real/export', {
        ...this.formData
      }, `数据视图_${new Date().getTime()}.xlsx`)
    },
    initChart() {
      let legendData = [];
      let formData = this.formData;
      let seriesData = null;
      if (this.formData.fieldFormYq.indexOf(1) >= 0) {
        legendData.push('一期进水流量：yq_jsll')
        seriesData = this.formList.yqJslls;
      }
      if (this.formData.fieldFormYq.indexOf(2) >= 0) {
        legendData.push('一期石灰投加量：shsjtjll4')
        seriesData = this.formList.shsjtjll4s;
      }
      if (this.formData.fieldFormYq.indexOf(3) >= 0) {
        legendData.push('一期加药流量：yq_jy_ssll')
        seriesData = this.formList.yqJySslls;
      }
      if (this.formData.fieldFormYq.indexOf(4) >= 0) {
        legendData.push('一期加药投加量：yq_tjl_show')
        seriesData = this.formList.yqTjlShows;
      }
      if (this.formData.fieldFormYq.indexOf(5) >= 0) {
        legendData.push('一期沉淀后浊度：DITT11')
        seriesData = this.formList.ditt11s;
      }

      if (this.formData.fieldFormEq.indexOf(6) >= 0) {
        legendData.push('二期进水流量：FIT102')
        seriesData = this.formList.fit102s;
      }
      if (this.formData.fieldFormEq.indexOf(7) >= 0) {
        legendData.push('二期石灰投加量：shsjtjll2')
        seriesData = this.formList.shsjtjll2s;
      }
      if (this.formData.fieldFormEq.indexOf(8) >= 0) {
        legendData.push('二期加药流量：eq_jy_ssll')
        seriesData = this.formList.eqJySslls;
      }
      if (this.formData.fieldFormEq.indexOf(9) >= 0) {
        legendData.push('二期加药投加量：eq_tjl_show')
        seriesData = this.formList.eqTjlShows;
      }
      if (this.formData.fieldFormEq.indexOf(10) >= 0) {
        legendData.push('二期1#沉淀池浊度：CDC1_ZD_Z')
        seriesData = this.formList.cdc1ZdZs;
      }
      if (this.formData.fieldFormEq.indexOf(11) >= 0) {
        legendData.push('二期2#沉淀后浊度：CDC2_ZD_Z')
        seriesData = this.formList.cdc2ZdZs;
      }

      if (this.formData.fieldFormYs.indexOf(12) >= 0) {
        legendData.push('盖竹原水浊度：MIT101_T')
        seriesData = this.formList.mit101Ts;
      }
      if (this.formData.fieldFormYs.indexOf(13) >= 0) {
        legendData.push('盖竹原水PH：AIT101_PH')
        seriesData = this.formList.ait101Phs;
      }
      if (this.formData.fieldFormYs.indexOf(14) >= 0) {
        legendData.push('盖竹原水温度：AIT101_T')
        seriesData = this.formList.ait101Ts;
      }
      if (this.formData.fieldFormYs.indexOf(15) >= 0) {
        legendData.push('高楼原水浊度：jnyszd')
        seriesData = this.formList.jnyszds;
      }
      if (this.formData.fieldFormYs.indexOf(16) >= 0) {
        legendData.push('高楼原水PH：jnysph')
        seriesData = this.formList.jnysphs;
      }
      let formR = this.formList;
      seriesData = this.formList.dateTimes;
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('main'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {
              show: true,
              readOnly: false,
              // 修改切换后的视图样式等
              optionToContent: function (opt) {
                // 默认就有一个参数，可以打印看一下
                let series = formR // 需要的数据源
                // 表头
                let thead = ''
                thead = `<tr><td style = "padding: 0 10px">时间</td>`
                legendData.forEach(function (item) {
                  thead += `
                            <td style = "padding: 0 10px">${item}</td>
                  `
                });
                thead += `</tr>`
                // 表身
                let tbody = ''
                for (let i = 0; i < seriesData.length; i++) {
                  tbody += `<tr><td style="padding: 0 10px">
                                            ${seriesData[i]}
                                        </td>`
                  if (formData.fieldFormYq.indexOf(1) >= 0) {
                    tbody += `
                                        <td style="padding: 0 10px">
                                            ${series.yqJslls[i]}
                                        </td>
                                `
                  }
                  if (formData.fieldFormYq.indexOf(2) >= 0) {
                    tbody += `
                                        <td style="padding: 0 10px">
                                            ${series.shsjtjll4s[i]}
                                        </td>
                                `
                  }
                  if (formData.fieldFormYq.indexOf(3) >= 0) {
                    tbody += `
                                        <td style="padding: 0 10px">
                                            ${series.yqJySslls[i]}
                                        </td>
                                `
                  }
                  if (formData.fieldFormYq.indexOf(4) >= 0) {
                    tbody += `
                                        <td style="padding: 0 10px">
                                            ${series.yqTjlShows[i]}
                                        </td>
                                `
                  }
                  if (formData.fieldFormYq.indexOf(5) >= 0) {
                    tbody += `
                                        <td style="padding: 0 10px">
                                            ${series.ditt11s[i]}
                                        </td>
                                `
                  }
                  if (formData.fieldFormEq.indexOf(6) >= 0) {
                    tbody += `
                                        <td style="padding: 0 10px">
                                            ${series.fit102s[i]}
                                        </td>
                                `
                  }
                  if (formData.fieldFormEq.indexOf(7) >= 0) {
                    tbody += `
                                        <td style="padding: 0 10px">
                                            ${series.shsjtjll2s[i]}
                                        </td>
                                `
                  }
                  if (formData.fieldFormEq.indexOf(8) >= 0) {
                    tbody += `
                                        <td style="padding: 0 10px">
                                            ${series.eqJySslls[i]}
                                        </td>
                                `
                  }
                  if (formData.fieldFormEq.indexOf(9) >= 0) {
                    tbody += `
                                        <td style="padding: 0 10px">
                                            ${series.eqTjlShows[i]}
                                        </td>
                                `
                  }
                  if (formData.fieldFormEq.indexOf(10) >= 0) {
                    tbody += `
                                        <td style="padding: 0 10px">
                                            ${series.cdc1ZdZs[i]}
                                        </td>
                                `
                  }
                  if (formData.fieldFormEq.indexOf(11) >= 0) {
                    tbody += `
                                        <td style="padding: 0 10px">
                                            ${series.cdc2ZdZs[i]}
                                        </td>
                                `
                  }

                  if (formData.fieldFormYs.indexOf(12) >= 0) {
                    tbody += `
                                        <td style="padding: 0 10px">
                                            ${series.mit101Ts[i]}
                                        </td>
                                `
                  }
                  if (formData.fieldFormYs.indexOf(13) >= 0) {
                    tbody += `
                                        <td style="padding: 0 10px">
                                            ${series.ait101Phs[i]}
                                        </td>
                                `
                  }
                  if (formData.fieldFormYs.indexOf(14) >= 0) {
                    tbody += `
                                        <td style="padding: 0 10px">
                                            ${series.ait101Ts[i]}
                                        </td>
                                `
                  }
                  if (formData.fieldFormYs.indexOf(15) >= 0) {
                    tbody += `
                                        <td style="padding: 0 10px">
                                            ${series.jnyszds[i]}
                                        </td>
                                `
                  }
                  if (formData.fieldFormYs.indexOf(16) >= 0) {
                    tbody += `
                                        <td style="padding: 0 10px">
                                            ${series.jnysphs[i]}
                                        </td>
                                `
                  }
                  tbody += `</tr>`
                }
                // 表格
                let table = `
                            <table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center">
                                ${thead}${tbody}
                            `
                return table;
              }
            },
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {
              show: true,
              title: '保存为图片'
            }
          }
        },
        legend: {
          data: legendData
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.formList.dateTimes
        },
        yAxis: [
          {
            type: 'value',
            position: 'left',
            min: this.formY.yqJsllsMinY,
            max: this.formY.yqJsllsMaxY
          }, {
            type: 'value',
            position: 'left',
            min: this.formY.fit102sMinY,
            max: this.formY.fit102sMaxY
          }, {
            type: 'value',
            position: 'left',
            min: this.formY.mit101TsMinY,
            max: this.formY.mit101TsMaxY
          }, {
            type: 'value',
            position: 'right',
            min: this.formY.ait101PhsMinY,
            max: this.formY.ait101PhsMaxY
          }, {
            type: 'value',
            position: 'left',
            min: this.formY.ait101TsMinY,
            max: this.formY.ait101TsMaxY
          }, {
            type: 'value',
            position: 'left',
            min: this.formY.jnyszdsMinY,
            max: this.formY.jnyszdsMaxY
          }, {
            type: 'value',
            position: 'right',
            min: this.formY.jnysphsMinY,
            max: this.formY.jnysphsMaxY
          }, {
            type: 'value',
            position: 'left',
            min: this.formY.shsjtjll4sMinY,
            max: this.formY.shsjtjll4sMaxY
          }, {
            type: 'value',
            position: 'left',
            min: this.formY.shsjtjll2sMinY,
            max: this.formY.shsjtjll2sMaxY
          }, {
            type: 'value',
            position: 'left',
            min: this.formY.ditt11sMinY,
            max: this.formY.ditt11sMaxY
          }, {
            type: 'value',
            position: 'left',
            min: this.formY.cdc1ZdZsMinY,
            max: this.formY.cdc1ZdZsMaxY
          }, {
            type: 'value',
            position: 'left',
            min: this.formY.cdc2ZdZsMinY,
            max: this.formY.cdc2ZdZsMaxY
          }, {
            type: 'value',
            position: 'left',
            min: this.formY.yqJySsllsMinY,
            max: this.formY.yqJySsllsMaxY
          }, {
            type: 'value',
            position: 'left',
            min: this.formY.eqJySsllsMinY,
            max: this.formY.eqJySsllsMaxY
          }, {
            type: 'value',
            position: 'left',
            min: this.formY.yqTjlShowsMinY,
            max: this.formY.yqTjlShowsMaxY
          }, {
            type: 'value',
            position: 'left',
            min: this.formY.eqTjlShowsMinY,
            max: this.formY.eqTjlShowsMaxY
          }
        ],
        series: [
          {
            yAxisIndex: 0,
            name: '一期进水流量：yq_jsll',
            type: 'line',
            data: this.formList.yqJslls,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [{type: 'average', name: 'Avg'}]
            },
            smooth: true,
            emphasis: {
              focus: 'series'
            }
          },
          {
            yAxisIndex: 1,
            name: '二期进水流量：FIT102',
            type: 'line',
            data: this.formList.fit102s,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: 'Avg'}
              ]
            },
            smooth: true,
            emphasis: {
              focus: 'series'
            }
          },
          {
            yAxisIndex: 2,
            name: '盖竹原水浊度：MIT101_T',
            type: 'line',
            data: this.formList.mit101Ts,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: 'Avg'}
              ]
            },
            smooth: true,
            emphasis: {
              focus: 'series'
            }
          },
          {
            yAxisIndex: 3,
            name: '盖竹原水PH：AIT101_PH',
            type: 'line',
            data: this.formList.ait101Phs,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: 'Avg'}
              ]
            },
            smooth: true,
            emphasis: {
              focus: 'series'
            }
          },
          {
            yAxisIndex: 4,
            name: '盖竹原水温度：AIT101_T',
            type: 'line',
            data: this.formList.ait101Ts,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [{type: 'average', name: 'Avg'}]
            },
            smooth: true,
            emphasis: {
              focus: 'series'
            }
          },
          {
            yAxisIndex: 5,
            name: '高楼原水浊度：jnyszd',
            type: 'line',
            data: this.formList.jnyszds,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: 'Avg'}
              ]
            },
            smooth: true,
            emphasis: {
              focus: 'series'
            }
          },
          {
            yAxisIndex: 6,
            name: '高楼原水PH：jnysph',
            type: 'line',
            data: this.formList.jnysphs,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: 'Avg'}
              ]
            },
            smooth: true,
            emphasis: {
              focus: 'series'
            }
          },
          {
            yAxisIndex: 7,
            name: '一期石灰投加量：shsjtjll4',
            type: 'line',
            data: this.formList.shsjtjll4s,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: 'Avg'}
              ]
            },
            smooth: true,
            emphasis: {
              focus: 'series'
            }
          }, {
            yAxisIndex: 8,
            name: '二期石灰投加量：shsjtjll2',
            type: 'line',
            data: this.formList.shsjtjll2s,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [{type: 'average', name: 'Avg'}]
            },
            smooth: true,
            emphasis: {
              focus: 'series'
            }
          },
          {
            yAxisIndex: 9,
            name: '一期沉淀后浊度：DITT11',
            type: 'line',
            data: this.formList.ditt11s,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: 'Avg'}
              ]
            },
            smooth: true,
            emphasis: {
              focus: 'series'
            }
          },
          {
            yAxisIndex: 10,
            name: '二期1#沉淀池浊度：CDC1_ZD_Z',
            type: 'line',
            data: this.formList.cdc1ZdZs,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: 'Avg'}
              ]
            },
            smooth: true,
            emphasis: {
              focus: 'series'
            }
          },
          {
            yAxisIndex: 11,
            name: '二期2#沉淀后浊度：CDC2_ZD_Z',
            type: 'line',
            data: this.formList.cdc2ZdZs,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: 'Avg'}
              ]
            },
            smooth: true,
            emphasis: {
              focus: 'series'
            }
          }, {
            yAxisIndex: 12,
            name: '一期加药流量：yq_jy_ssll',
            type: 'line',
            data: this.formList.yqJySslls,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [{type: 'average', name: 'Avg'}]
            },
            smooth: true,
            emphasis: {
              focus: 'series'
            }
          },
          {
            yAxisIndex: 13,
            name: '二期加药流量：eq_jy_ssll',
            type: 'line',
            data: this.formList.eqJySslls,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: 'Avg'}
              ]
            },
            smooth: true,
            emphasis: {
              focus: 'series'
            }
          },
          {
            yAxisIndex: 14,
            name: '一期加药投加量：yq_tjl_show',
            type: 'line',
            data: this.formList.yqTjlShows,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: 'Avg'}
              ]
            },
            smooth: true,
            emphasis: {
              focus: 'series'
            }
          },
          {
            yAxisIndex: 15,
            name: '二期加药投加量：eq_tjl_show',
            type: 'line',
            data: this.formList.eqTjlShows,
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: 'Avg'}
              ]
            },
            smooth: true,
            emphasis: {
              focus: 'series'
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.minY = null;
      this.maxY = null;
    },
    /** 启动按钮操作 */
    handleQuery() {
      this.handleAsync();
    },
  }
}

</script>
<style>
.el-col.el-col-24 {
  height: 40px;
}
</style>
